<template>
  <AppMemberLayout>
    <div class="member-order">
      <XtxTabs v-model:active="active">
        <XtxTabTitle v-for="status in orderStatus" :key="status.name">{{
          status.label
        }}</XtxTabTitle>
      </XtxTabs>
      <div v-if="!loading && orderList?.items.length === 0" class="none">
        暂无数据
      </div>
      <div class="loading" v-if="loading"></div>
      <div class="order-list" v-if="orderList && !loading">
        <OrderItem
          :order="item"
          v-for="item in orderList.items"
          :key="item.id"
          @onCancelOrder="onCancelOrder"
          @onOrderListReload="getData"
          @onViewLogistics="onViewLogisticsHandler"
        />
      </div>
      <XtxPagination
        v-if="orderList && totalPage > 1"
        v-model:page="reqParams.page"
        :pageSize="reqParams.pageSize"
        :pageCount="totalCount"
      />
      <CancelOrder ref="cancelOrder" @onReloadOrderList="getData" />
      <OrderLogistics ref="OrderLogisticsComponent" />
    </div>
  </AppMemberLayout>
</template>

<script>
import AppMemberLayout from "@/components/AppMemberLayout";
import OrderItem from "@/views/member/order/components/OrderItem";
import CancelOrder from "@/views/member/order/components/CancelOrder";
import OrderLogistics from "@/views/member/order/components/OrderLogistics";
import { orderStatus } from "@/api/constants";
import { ref, watch } from "vue";
import { getOrderList } from "@/api/order";
import { getLogisticsByOrderId } from "@/api/member";
export default {
  name: "OrderListPage.vue",
  components: { AppMemberLayout, OrderItem, CancelOrder, OrderLogistics },
  setup() {
    const active = ref(0);
    const { orderList, getData, reqParams, loading, totalPage, totalCount } =
      useOrderList();
    getData();
    // 取消订单模态框
    const cancelOrder = ref();
    // 点击取消订单弹出模态狂
    const onCancelOrder = (id) => {
      cancelOrder.value.visible = true;
      // 保存订单id
      cancelOrder.value.id = id;
    };
    // 检测选项卡变化
    watch(active, (current) => {
      // 重置订单状态参数
      reqParams.value.orderState = current;
      // 重置页码参数
      reqParams.value.page = 1;
    });
    // 用于存储查看物流弹框组件实例对象
    const OrderLogisticsComponent = ref();
    // 当用户点击查看物流按钮时
    const onViewLogisticsHandler = (id) => {
      // 渲染查看物流弹框组件
      OrderLogisticsComponent.value.visible = true;
      getLogisticsByOrderId(id).then((data) => {
        console.log(data);
        // 存储订单物流信息
        OrderLogisticsComponent.value.logistics = data.result;
      });
    };
    return {
      active,
      orderList,
      orderStatus,
      loading,
      totalPage,
      totalCount,
      reqParams,
      onCancelOrder,
      cancelOrder,
      getData,
      OrderLogisticsComponent,
      onViewLogisticsHandler,
    };
  },
};
// 获取订单列表
function useOrderList() {
  // 保存订单列表
  const orderList = ref();
  const loading = ref(false);
  // 用于存储总数据条数
  const totalCount = ref(0);
  // 用于存储总页数
  const totalPage = ref(0);
  // 定义请求参数
  const reqParams = ref({ page: 1, pageSize: 10, orderState: 0 });
  const getData = () => {
    loading.value = true;
    getOrderList(reqParams.value).then((data) => {
      orderList.value = data.result;
      // 更新总数据条数
      totalCount.value = data.result.counts;
      // 更新总页数
      totalPage.value = data.result.pages;
      loading.value = false;
    });
  };
  // 监听请求参数的变化,有变化则重新过去订单数据
  watch(reqParams.value, () => getData(), { immediate: true });
  return { orderList, getData, reqParams, loading, totalCount, totalPage };
}
</script>

<style lang="less" scoped>
.member-order {
  height: 100%;
  background: #fff;
  position: relative;
}

.order-list {
  background: #fff;
  padding: 20px;
  position: relative;
}
.loading {
  height: calc(100% - 60px);
  width: 100%;
  min-height: 400px;
  position: absolute;
  left: 0;
  top: 60px;
  background: rgba(255, 255, 255, 0.9) url(../../../assets/images/loading.gif)
    no-repeat center 18%;
}
.none {
  height: 400px;
  text-align: center;
  line-height: 400px;
  color: #999;
  background: rgba(255, 255, 255, 0.9);
}
</style>
